<script setup>
import { ref, reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from "vue"
import {diagSort} from '@/api/ShopDatabase/goodsSetting.js'
import getRules from "@/validUtils";
// dialog弹框组件

const handleClose = () => {
    cancel()
}

const tableConfig = ref([
    {
      prop: "diagnosisValue",
      label: "类别名称",
      width:468
    },

]);
const tableLoading = ref(false)
const totalPage = ref(0)
const newData = ref([])



const props = defineProps({
    dialogCategorySort:{
        type:Boolean,
        default:false
    },
    tableData:{
        type:Array,
        default:() => ([])
    },
    dialogTitle:{
        type:String,
        default:''
    },
    options:{
        type:Array,
        default:() => ([])
    }
})

// 定义方法
const emit = defineEmits(['changeCategorySort','submitCategory'])
const backFile = (val) => {
    console.log(val,'val');
}

const cancel = () => {
    emit('changeCategorySort',false)
}


// 表格数据排序
watch(() => props.tableData, (val) => {
    console.log(val,'val');
    if(val.length > 0){
        newData.value = val.filter(item => item.parentId == '0')
    }
},{
    immediate:true,
    deep:true
})


// 拖拽功能
const idList = ref([])
idList.value = newData.value.map(item => {
    return {
            id:item.id,
            diagnosisValue:item.diagnosisValue,  
            sortValue:0
        }
    })
const drawHandle = async(newIndex,oldIndex) => {
    if(newIndex !== oldIndex){
           
            const oldValue = idList.value[oldIndex]
            idList.value.splice(oldIndex, 1)
            idList.value.splice(newIndex, 0, oldValue)
 
    }
}


// 确认提交
const SubmitEvent = () => {
    if(idList.value.length > 0){
        emit("submitCategory",idList.value)
    }else{
        cancel()
    }
   
}
//组件挂载到节点上之前执行的函数
onBeforeMount(()=>{})

//组件挂载完成后执行的函数
onMounted(()=>{})

//组件更新之前执行的函数
onBeforeUpdate(()=>{})

//组件更新完成之后执行的函数
onUpdated(()=>{})

//组件卸载之前执行的函数
onBeforeUnmount(()=>{})

//组件卸载完成后执行的函数
onUnmounted(()=>{})

</script>

<template>
  <div class="">
    <el-dialog
            v-model="props.dialogCategorySort"
            :title="dialogTitle"
            width="500px"
            :before-close="handleClose"
            align-center
            :close-on-click-modal=false
        >
           <div class="dialog-main" v-if="props.dialogCategorySort">
            <SeachTable 
                :tableType="1"
                ref="seachTable"
                :forms="formInline"
                :btnLefts="btnLefts"
                :btnRights="btnRights"
                :tableLoading="tableLoading"
                :tableConfig="tableConfig"
                :tableData="newData"
                :totalPage="totalPage"
                @handlerSearch="handlerSearch"
                :isShowPage="false"
                :isDrag="true"
                @drawHandle="drawHandle"
                >
        </SeachTable>
            
            </div>
                <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="SubmitEvent">
                    确定
                    </el-button>
                </span>
                </template>
            </el-dialog>
        </div>
</template>

<style lang="less" scoped>
    .dialog-main{
        .title-show {
            margin:6px 0 16px 0;
            padding: 12px;
            width: 468px;
            height: 66px; 
            background: rgba(52, 128, 255, 8%);
            // opacity: 8%;
            box-sizing: border-box;
            .buss-pic{
              
            }
            .door-info{
                margin-bottom: 12px;
                color: #3480ff;
                font-family: "PingFang SC";
                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                line-height: 16px;
            }
        }
        .el-form-item{
            margin-bottom: 16px;
            :deep(.el-input) {
                width: 260px;
            }
          
         }
    }
    :deep(.el-dialog__body){
        padding: 0px;
        padding-top: 5px;
    }
   :deep(.el-dialog__footer) {
    padding-top: 0px !important;
   }


   :deep(.el-table__header) {
        .el-table__cell {
            background: #DDDDDD !important;
            }
    }

    // 表格高度
    :deep(.table){
        height: 210px !important;
    }
    :deep(.jg){
        // display: none;
        height: 16px !important;
    }
</style>
